<template>
	<view>
		<view class="tui-container">
			<view class="tui-notice tui-animation">
				<text class="notice-text">{{ noticeMessage }}</text>
			</view>
		</view>

		<view class="row">
			<view class="row-1 color-1" @click="toCalculator">
				<view class="headWord">
					<text class="firstHead">计算器</text>
					<view class="text-2">单复利收益计算</view>
					<view class="text-2">根据收益反推单利、复利</view>
				</view>
				<image class="headImg" src="../../static/images/common/jisuanqi1.png"></image>
			</view>

			<view class="row-1 color-2" @click="toCalculatorContrast">
				<view class="headWord">
					<text class="firstHead">计算器</text>
					<view class="text-2">单复利简单对比</view>
					<view class="text-2">支持封闭期计算</view>
				</view>
				<image class="headImg" src="../../static/images/common/jisuanqi4.png"></image>
			</view>

			<view class="row-1 color-3" @click="toCircleFriends">
				<view class="headWord">
					<text class="firstHead">发圈防折叠</text>
					<view class="text-2">仅对内容格式化</view>
				</view>
				<image class="headImg" src="../../static/images/common/pengyouquan.png"></image>
			</view>

			<view class="row-1 color-4" @click="toQrCode">
				<view class="headWord">
					<text class="firstHead">二维码</text>
					<view class="text-2">自定义样式</view>
					<view class="text-2">颜色、大小、脚标、中心图</view>
				</view>
				<image class="headImg" src="../../static/images/common/erweima.png"></image>
			</view>
		</view>
		
		<view class="share">
			<button type="" open-type="share" >分享好友</button>
		</view>

		<!-- 轮播图 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" v-if="isShowView">
			<swiper-item>
				<view class="swiper-item">
					<image
						src="http://soqkmpqw1.hn-bkt.clouddn.com/hzs/swiper/swiper1.jpg?e=1734765480&token=92bJfU8bruMk8829PKgTZoqRq6-vC2BJtaaSd7d9:1Ysok18w4Phy07nNynjg3jcB7Bo="
						mode=""
					></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image
						src="http://soqkmpqw1.hn-bkt.clouddn.com/hzs/swiper/swiper2.jpg?e=1734765506&token=92bJfU8bruMk8829PKgTZoqRq6-vC2BJtaaSd7d9:GTatzRw6IBJLuhfAAzyObxpKVZ0="
						mode=""
					></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isShowView: false,
			noticeMessage: '有问题请及时联系作者反馈'
		};
	},
	created() {
		//设置分享到微信分享到朋友圈
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	methods: {
		toCalculator() {
			wx.reLaunch({
				url: '/pages/tools/calculator/calculator'
			});
		},
		toCalculatorContrast() {
			wx.reLaunch({
				url: '/pages/tools/contrast/contrast'
			});
		},
		toCircleFriends() {
			wx.reLaunch({
				url: '/pages/tools/circleFriends/circleFriends'
			});
		},
		toPainting() {
			wx.reLaunch({
				url: '/pages/tools/painting/painting'
			});
		},
		toQrCode() {
			wx.reLaunch({
				url: '/pages/tools/qrCode/qrCode'
			});
		}
	}
};
</script>

<style lang="stylus">
.row
	width: 500rpx
	margin: 0 auto
	.row-1
		border-radius: 20rpx
		box-shadow: 2rpx 4rpx 8rpx 2rpx rgba(0,0,0,.3);
		color: #fff
		-webkit-box-align: center
		align-items: center
		display: flex;
		margin-top: 50rpx
		.headWord
			padding: 30rpx 0 30rpx 26rpx;
			width: 350rpx
		.headImg
			height: 70rpx
			width: 70rpx
		.firstHead
			display: block
			font-size: 34rpx
			font-weight: bold
			margin-bottom: 10rpx
		.text-2
			font-size: 28rpx
			font-weight: bold
	.color-1
		background-image: linear-gradient(45deg,#ff4b87,#ff8c8c);
	.color-2
		background-image: linear-gradient(45deg,#ff9148,#ffd752);
	.color-3
		background-image: linear-gradient(45deg,#e149ff,#ae6fff);
	.color-4
		background-image: linear-gradient(45deg,#5871ff,#63a7ff);

.tui-container
	width: 100%
	height: 100rpx
	display: flex
	justify-content: center
	align-items: center
	overflow: hidden; /* 隐藏超出部分，避免滚动提示文字影响页面布局 */
	.tui-notice
		transform: translateX(100%)  /* 初始位置在屏幕右侧外 */
		white-space: nowrap  /* 让文字不换行，便于水平滚动展示 */
		font-size: 32rpx
		color: #ff4b87
	.tui-animation
		animation: tui-rolling 12s linear infinite /* 应用动画，与前面定义一致 */
	.notice-text
		padding: 0 20px

.swiper
		margin-top: 50rpx
		height: 350rpx
		image
			width: 100%
			height: 350rpx

.share
	margin: 20rpx 20rpx
	button
		color: #fff
		background: linear-gradient(45deg,#ff4b87,#ff8c8c);
		box-shadow: 2rpx 4rpx 8rpx 2rpx rgba(0,0,0,.3);
		font-size: 28rpx
		font-weight: bold

@keyframes tui-rolling 
	0% 
		transform: translateX(100%); /* 动画开始时在屏幕右侧外 */
	100% 
		transform: translateX(-100%); /* 动画结束时移动到屏幕左侧外，实现循环滚动效果 */
		
</style>
